<html lang="zh-cn">
<head>
{% include "tdm_include_head_template.html" %}
<link href="/static/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css"/>
<link href="/static/css/bootstrap-tokenfield.min.css" rel="stylesheet" type="text/css">
<link href="/static/css/tokenfield-typeahead.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/static/js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-tokenfield.min.js"></script>
<script type="text/javascript">
function get_venue(city) {
  $.ajax({
    type: "GET",
    url: "/tdm/json/venue/"+city+"/",
    async: false,
    dataType: "json",
    success: function (msg) {
      $("#venue_select").html('');
      $.each(msg, function(i, item) {
        $("#venue_select").append('<option value="'+item+'">'+item+'</option>');
      });
    }
  });
}
$(document).ready(function() {
  $("#venue_select").multiselect({
    includeSelectAllOption: true,
    maxHeight: 150,
    buttonWidth: '100%',
  });
  //$('#example-getting-started').multiselect();
  $("#city_select").change(function() {
    //alert($("#city_select").val());
    get_venue($("#city_select").val());
    $("#venue_select").multiselect('rebuild');
  });
  $("#add_venue").click(function() {
    //console.log($("#venue_select").val());
    $.each($("#venue_select").val(), function(i, item) {
      $('#tokenfield').tokenfield('createToken', $("#city_select").val()+':'+item);
    });
  });
  $("#autocmd_form").submit(function() {
    $.ajax({
      type: "POST",
      url: "/tdm/admin/autocmd/",
      async: false,
      dataType: "json",
      data: {
        "city_venues": $('#tokenfield').val(),
        "command": $('#command').val(),
        "op": $('#op').val()
      },
      traditional: true,
      timeout: 3000,
      success: function (msg) {
        alert(msg);
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert(XMLHttpRequest.status);
        alert(XMLHttpRequest.readyState);
        alert(textStatus);
      }
    });
    return false;
  });
  $("#op_savename").click(function() {
    command=$("#command").val();
    savename=$("#autocmd_savename").val();
    if (command=="") {
      alert("必须填写要执行的脚本");
      return false;
    }
    if (savename=="") {
      alert("必须填写保存的脚本名称");
      return false;
    }
    $.ajax({
      type: "POST",
      url: "/tdm/admin/autocmd/add/",
      async: false,
      dataType: "json",
      data: {
        "command": command,
        "savename": savename
      },
      traditional: true,
      timeout: 3000,
      success: function (msg) {
        alert(msg);
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert(XMLHttpRequest.status+textStatus);
      }
    });
    return false;
  });
  $("#op_issued_del").click(function() {
    del_list = $.map($("input[name=issued_key]:checked"), function(o){
      return o.value;
    });
    if (del_list.length==0) {
      alert("必须选择删除的命令");
      return false;
    }
    $.ajax({
      type: "POST",
      url: "/tdm/admin/autocmd/del/",
      async: false,
      dataType: "json",
      data: {
        "issued_key": del_list
      },
      traditional: true,
      timeout: 3000,
      success: function (msg) {
        alert(msg);
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert(XMLHttpRequest.status+textStatus);
      }
    });
    $("input[name=issued_key]:checked").prop("checked", false);
    location.reload();
    return false;
  });
  $("#savecmd_select").change( function() {
    console.log($(this).val());
    $("#command").val($(this).val());
  });
  get_venue($("#city_select").val());
  $("#venue_select").multiselect('rebuild');
  $("#tokenfield").tokenfield();
});
</script>
</head>

<body class=" theme-blue">
{% include "tdm_include_navbar_template.html" %}

<div class="container">
  <br/>
  {% include "tdm_include_error_template.html" %}

  {% include "tdm_include_admin_page_template.html" %}

  <div class="form-context">
  <form id="autocmd_form" name="autocmd_form" class="form-horizontal" role="form" action="/tdm/admin/autocmd/" method="post">
    <div class="form-group">
      <div class="col-md-3">
        <select name="city_select" id="city_select" class="form-control">
          {% for city in city_all %}
          <option value="{{city.name}}" {% ifequal city.name view_city.name %}selected="selected"{% endifequal %}>{{city.name}}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-md-3">
        <select id="venue_select" name="venue_select" multiple="multiple">
        </select>
      </div>
      <div class="col-md-6">
        <button type="button" id="add_venue" value="alert_config" class="btn btn-primary">添加</button>
      </div>
    </div>
    <div class="form-group">
      <label for="exampleInputEmail1">已添加的城市教学点</label>
      <!--<textarea name="city_venue" rows="3" class="form-control" id="city_venue"></textarea>-->
      <input type="text" class="form-control" id="tokenfield" />
    </div>
    <div class="form-group">
      <label for="exampleInputEmail1">自动化命令</label>
      <select name="savecmd_select" id="savecmd_select" class="form-control">
        <option value="">手动输入</option>
        {% for cmd in cmd_list %}
        <option value="{{cmd.command}}">{{cmd.name}}</option>
        {% endfor %}
      </select>
      <textarea name="command" rows="5" class="form-control" id="command"></textarea>
    </div>
    <div class="row">
      <div class="col-lg-9">
        <button type="submit" id="op" name="op" value="autocmd_config" class="btn btn-primary">下发命令</button>
      </div>
      <div class="col-lg-3">
        <div class="input-group">
          <input type="text" class="form-control" name="autocmd_savename" id="autocmd_savename">
          <span class="input-group-btn">
            <button class="btn btn-default" id="op_savename" name="op_savename" type="button">保存</button>
          </span>
        </div>
      </div>
    </div>
    <br><br>
    <div class="row">
      <table id="issued_cmd_table" class="table table-hover">
        <tr>
          <th>教学点</th>
          <th>命令</th>
          <td><button id="op_issued_del" name="op_issued_del" value="autocmd_del_issued" type="button" class="btn btn-primary btn-sm">删除</button></td>
        </tr>
        {% for issued_cmd in issued_cmd_list %}
        <tr>
          <td>{{issued_cmd.name}}</td>
          <td><pre>{{issued_cmd.command}}</pre></td>
          <td><input type="checkbox" name="issued_key" value="{{issued_cmd.key}}" class="pull-right"></td>
        </tr>
        {% endfor %}
      </table>
    </div>
  </form>
  </div>

{% include "tdm_include_footer_template.html" %}
</div>
</body>
</html>